import React from 'react';
import { useHistory } from 'react-router';
import { observer } from 'mobx-react-lite';
import { message, Modal, Form, Input } from 'antd';
import * as headerApi from '~/apis/header/headerApi';
import './index.local.sass';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

export const ChangePasswordModal = observer((props: any) => {
  const state = props.state;

  const [form] = Form.useForm();
  const history = useHistory();

  // 修改密码
  const onChangeOk = () => {
    form.validateFields().then((values) => {
      const params = {
        oldPassword: values.oldPassword,
        password: values.password,
      };

      headerApi.updatePassword(params).then(() => {
        message.success('Password modification succeeded, please login again');
        state.visible = false;
        history.push('/login');
      }).catch(() => {
        message.error('update fail');
      });
    });
  };

  const onChangeCancel = () => {
    state.visible = false;
  };

  return (
    <Modal
      visible={state.visible}
      title='Change password'
      okText="Change"
      cancelText="Cancel"
      onCancel={onChangeCancel}
      onOk={onChangeOk}
    >
      <Form className="header-form" {...layout} form={form} >
        <Form.Item
          name="oldPassword"
          label="Old Password"
          rules={[{ required: true, message: 'Please input your old password!' }]}
        >
          <Input
            allowClear
            placeholder="Please input"
            type="password"
          />
        </Form.Item>
        <Form.Item
          name="password"
          label="New Password"
          rules={[
            { required: true, message: 'Please input your new password!' },
            ({ getFieldValue }) => ({
              validator(_rule, value) {
                if (!value || getFieldValue('oldPassword') !== value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('Old password and new password cannot be the same!'));
              },
            }),
          ]}
        >
          <Input
            allowClear
            placeholder="Please input"
            type="password"
          />
        </Form.Item>
        <Form.Item
          name="confirmedPassword"
          label="Confirmed Password"
          rules={[
            { required: true, message: 'Please confirm the password again!' },
            ({ getFieldValue }) => ({
              validator(_rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('The two passwords that you entered do not match!'));
              },
            }),
          ]}
        >
          <Input
            allowClear
            placeholder="Please input"
            type="password"
          />
        </Form.Item>
      </Form>
    </Modal>
  );
});
